<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
        <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0" @click="batch_del"></el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.questionName" placeholder="试题名称" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" row-key="questionId" @selection-change="selectionChange" stripe>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="#" type="index" width="50"></el-table-column>
        <el-table-column label="试题名称" prop="questionName" width="150"></el-table-column>
        <el-table-column label="状态" prop="disabled" width="80">
          <template #default="scope">
            <el-switch
              v-model="scope.row.disabled"
              @change="changeSwitch($event, scope.row)"
              :loading="scope.row.$switch_status"
              active-value="N"
              inactive-value="Y"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdTime" width="180"></el-table-column>

        <el-table-column label="操作" fixed="right" align="right" width="300">
          <template #default="scope">
            <el-button-group>
              <el-button text type="primary" size="small" @click="setLanguage(scope.row, scope.$index)">语言配置</el-button>
              <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
              <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                <template #reference>
                  <el-button text type="primary" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save = false"></save-dialog>
  <save-language-dialog v-if="languageDialog.save" ref="saveLanguageDialog" @closed="languageDialog.save = false"></save-language-dialog>
</template>

<script>
import saveDialog from './components/save';
export default {
  name: 'question',
  components: {
    saveDialog,
  },
  data() {
    return {
      dialog: {
        save: false,
      },
      languageDialog: {
        save: false,
      },
      apiObj: this.$API.question.page,
      selection: [],
      search: {
        questionName: '',
      },
    };
  },
  methods: {
    //添加
    add() {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open();
      });
    },
    //编辑
    table_edit(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open('edit').setData(row);
      });
    },
    //查看
    table_show(row) {
      this.dialog.save = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open('show').setData(row);
      });
    },
    //删除
    async table_del(row) {
      var reqData = { id: row.questionId };
      var res = await this.$API.question.remove.post(reqData);
      if (res.code == 200) {
        this.$refs.table.refresh();
        this.$message.success('删除成功');
      } else {
        this.$alert(res.message, '提示', { type: 'error' });
      }
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //表格内开关
    async changeSwitch(val, row) {
      row.$switch_status = true;
      var reqData = { id: row.questionId, disable: val };
      var res = await this.$API.question.disable.post(reqData);
      if (res.code == 200) {
        this.$message.success('操作成功');
        row.disabled = val;
      } else this.$message.error('操作失败');
      delete row.$switch_status;
    },
    //搜索
    upsearch() {
      this.$refs.table.upData(this.search);
    },
    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode == 'add') {
        this.$refs.table.refresh();
      } else if (mode == 'edit') {
        this.$refs.table.refresh();
      }
    },
    //设置语言
    setLanguage(row) {
      console.log(row);
      // window.open("/#/question/language?id=" + row.questionId, "_blank");
      // this.$router.replace({
      // 	path: "/question/language?id=" + row.questionId,
      // });
      this.$router.push({
        path: '/question/language',
        query: {
          id: row.questionId,
        },
      });
      //
      // this.languageDialog.save = true;
      // this.$nextTick(() => {
      // 	this.$refs.saveLanguageDialog.open();
      // });
    },
  },
};
</script>

<style></style>
